<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>留言列表</title>
    <link th:href="@{/static/bootstrap-5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        a {
            text-decoration: none;
            color: #007bff;
            margin-right: 10px;
        }
        a:hover {
            text-decoration: underline;
        }
        .search-box {
            margin: 20px 0;
        }
        .add-button {
            margin-bottom: 20px;
        }

        .revert-list {
            background-color: #f8f9fa;
            border-radius: 4px;
            padding: 15px;
        }

        .revert-item {
            background-color: white;
            border-radius: 4px;
            padding: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .toggle-revert {
            cursor: pointer;
            color: #6c757d;
            margin-left: 10px;
        }

        .toggle-revert:hover {
            color: #0d6efd;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<h1>留言列表</h1>

<!-- 添加留言按钮 -->
<a th:href="@{/messages/add}" class="add-button">添加新留言</a>

<!-- 搜索框 -->
<div class="search-box">
    <form th:action="@{/messages/search}" method="get">
        <input type="text"
               name="keyword"
               placeholder="输入关键字搜索标题或内容"
               th:value="${keyword}"
               style="width: 300px; padding: 5px;">
        <button type="submit" style="padding: 5px 10px;">搜索</button>
    </form>
</div>

<!-- 留言表格 -->
<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>标题</th>
        <th>内容</th>
        <th>作者</th>
        <th>发布时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <th:block th:each="message : ${messages}">
        <!-- 留言行 -->
        <tr>
            <td th:text="${message.messageID}"></td>
            <td th:text="${message.title}"></td>
            <td th:text="${message.content}"></td>
            <td th:text="${message.writer}"></td>
            <td th:text="${#dates.format(message.writeDate, 'yyyy-MM-dd HH:mm')}"></td>
            <td>
                <a th:href="@{/messages/edit/{id}(id=${message.messageID})}">编辑</a>
                <a th:href="@{/messages/delete/{id}(id=${message.messageID})}"
                   onclick="return confirm('确定要删除这条留言吗？')">删除</a>
                <a href="#" class="toggle-revert"
                   th:data-msgid="${message.messageID}"
                   th:text="'回复(' + ${revertsMap.get(message.messageID).size()} + ')'"></a>
            </td>
        </tr>

        <!-- 回复折叠区域 -->
        <tr class="revert-container" th:attr="data-msgid=${message.messageID}" style="display: none;">
            <td colspan="6">
                <div class="revert-list" style="margin-left: 30px;">
                    <div th:each="revert : ${revertsMap.get(message.messageID)}"
                         class="revert-item" style="margin: 10px 0; padding: 10px; border-bottom: 1px solid #eee;">
                        <div style="display: flex; justify-content: space-between;">
                            <div>
                                <strong th:text="${revert.writer} + '：'"></strong>
                                <span th:text="${revert.content}"></span>
                            </div>
                            <div style="color: #666; font-size: 0.9em;">
                                <span th:text="${#dates.format(revert.writeDate, 'yyyy-MM-dd HH:mm')}"></span>
                                <a th:href="@{/reverts/delete/{id}(id=${revert.revertID})}"
                                   onclick="return confirm('确定删除该回复吗？')"
                                   style="margin-left: 10px; color: #dc3545;">删除</a>
                            </div>
                        </div>
                    </div>

                    <!-- 添加回复表单 -->
                    <form th:action="@{/reverts/add}" method="post" style="margin-top: 20px;">
                        <input type="hidden" name="messageID" th:value="${message.messageID}">
                        <div class="input-group">
                                <textarea name="content"
                                          style="width: 80%; padding: 8px;"
                                          placeholder="输入回复内容" required></textarea>
                            <button type="submit"
                                    style="margin-left: 10px; padding: 8px 15px;"
                                    class="btn btn-primary btn-sm">提交回复</button>
                        </div>
                    </form>
                </div>
            </td>
        </tr>
    </th:block>
    </tbody>
</table>

<script th:src="@{/static/bootstrap-5.3.0/js/bootstrap.bundle.min.js}"></script>

<script th:inline="javascript">
    window.onload = function() {
        // 删除成功提示
        const deleteSuccess = /*[[${deleteSuccess}]]*/ false;
        if (deleteSuccess) {
            alert('删除成功！');
        }

        // 错误提示（通用）
        const errorMessage = /*[[${error}]]*/ null;
        if (errorMessage) {
            alert('操作失败：' + errorMessage);
        }
    };

    document.addEventListener('DOMContentLoaded', function() {
        // 折叠/展开回复
        document.querySelectorAll('.toggle-revert').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const msgId = this.getAttribute('data-msgid');
                const container = document.querySelector(`tr.revert-container[data-msgid="${msgId}"]`);
                container.style.display = container.style.display === 'none' ? 'table-row' : 'none';
            });
        });

        // 操作结果提示
        const successMessage = /*[[${success}]]*/ null;
        const errorMessage = /*[[${error}]]*/ null;
        if (successMessage) alert(successMessage);
        if (errorMessage) alert(errorMessage);
    });
</script>

</body>
</html>